<template>
	<view class="bg-white round-8 flex flex-center   h-200 overflow-hidden relative">
		<view class="flex-column flex gap-10" v-if="!props.modelValue">
			<text class="iconfont icon-shangchuanwenjian fs-50 text-999" @click="choose"></text>
			<slot></slot>
		</view>
		<image :src="props.modelValue" v-if='props.modelValue&&props.mode=="image"' class="w-p-100 h-p-100 round-8"></image>
		<video :src="props.modelValue" v-if='props.modelValue&&props.mode=="video"' class="w-p-100 h-p-100 round-8"></video>
		
		<view v-if='props.modelValue' @click="choose" class="absolute round-top-left-8 top-0 left-0 bg-blue text-white px-12 fs-12 round-bottom-right-8 py-4">重新选择</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { uploadImg, uploadVideo } from '@/api/system.js'
	const props = defineProps({
		modelValue: {
			type: String,
			default: ''
		},
		mode: {
			type: String,
			default: 'video'
		}
	})
	const emit = defineEmits(['update:modelValue'])

	const choose = () => {
		if (props.mode == 'image') {
			uni.chooseImage({
				success(e) {
					upload(e.tempFilePaths)
				}
			})
		}
		
		if(props.mode=='video'){ 
			uni.chooseVideo({
				success(e) {
					upload(e.tempFilePath)
				}
			})
			 
		}
	}

	const upload = (url = '') => {
		if (props.mode == 'image') {
			uploadImg({ filePath: url, name: 'file', is_hide: 1 }).then(res => {
				emit('update:modelValue', res.data.file_url)
			})
		}
		if (props.mode == 'video') {
			uploadVideo({ filePath: url, name: 'file', is_hide: 1 }).then(res => {
				emit('update:modelValue', res.data.file_url)
			})
		}
	}
</script>

<style>
</style>